<template>

    <!-- 单位登录 -->
    <div class="box-unit">
        <el-form :model="form" :rules="rules" ref="ruleFormRef" hide-required-asterisk="true" class="box-input">
            <el-form-item label="单位名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入单位名称" />
            </el-form-item>

            <el-form-item label="申请人" prop="apply_user">
                <el-input v-model="form.apply_user"  placeholder="请输入申请人姓名" />
            </el-form-item>
            <el-form-item label="申请电话" prop="apply_mobile">
                <el-input v-model="form.apply_mobile"  placeholder="请输入申请电话" />
            </el-form-item>

        </el-form>

        <!-- 上传资料 -->
        <div class="box-upload">
            <div class="box-upload-img">
                <el-image style="width: 200px; height: 160px;" :src="Img" fit="scale-down" />
                <el-image style="width: 200px; height: 160px;" :src="Image" fit="scale-down" />
            </div>

            <div class="box-upload-but">

                <el-upload v-model:file-list="fileList" class="upload-demo" action="#" :on-change="handleChange">
                    <p type="primary">上传《申请表》</p>
                </el-upload>
                
                <el-upload v-model:file-list="fileList" class="upload-demo" action="#" :on-change="handleChange">
                    <p type="primary">上传身份证复印件</p>
                </el-upload>

            </div>
        </div>

        <div class="box-but">
            <!--checked 当前是否勾选 -->
            <input type="checkbox" :checked="agreement" @click="agreementBut" style="cursor: pointer;" />
            <p>已阅读并同意青海无人机综合管理服务平台 <span>《用户协议》</span>
            </p>
        </div>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">发起申请</el-button>
        </el-form-item>

        <div class="box-link">
            <router-link to="/login" class="box-router-link">去登录</router-link>
        </div>


    </div>

</template>


<script lang='ts' setup>

import { reactive, ref } from 'vue'

import Img from '@/assets/img/unitReg/pic_1.7fa36641.png'
import Image from '@/assets/img/unitReg/pic_2.bcbfbfa4.png'
import { useRouter } from 'vue-router';
import type { FormRules } from 'element-plus';
import type { userType } from '@/hooks/type';

const agreement = ref(false);
const router = useRouter();

// 协议点击
const agreementBut = () => {
    agreement.value = !agreement.value;
};

const form = reactive<userType | any>({});


const onSubmit = () => {
    console.log('submit!')
};


// 表单验证
const rules = reactive<FormRules>({
    name: [{ required: true, message: "请输入单位名称", trigger: "blur" },],
    apply_user: [{ required: true, message: "请输入申请人姓名", trigger: "blur" },],
    apply_mobile: [{ required: true, message: "账号不能为空", trigger: "blur" },],
});




</script>


<style lang='scss' scoped>
.box-unit {
    // width: 345px;
    margin: 0 auto;

    // input框样式
    .box-input {
        margin: 0 auto;
        width: 345px;

        ::v-deep .el-form-item {
            width: 100%;

            .el-form-item__label {
                font-size: 12px;
            }
        }

        .el-input {
            width: 260px;

            ::v-deep .el-input__wrapper {
                height: 28px;
                font-size: 12px;
                background-color: rgb(245, 248, 250);
            }
        }

        ::v-deep .el-form-item__content {
            margin: 0px !important;
            justify-content: flex-end;
        }

    }

    // 上传
    .box-upload {
        width: 400px;
        height: 240px;
        background-color: rgb(247, 248, 254);
        margin: 0 auto;

        .box-upload-img {
            display: flex;
        }

        .box-upload-but {
            display: flex;
            justify-content: space-evenly;
            margin-top: 15px;

            p {
                width: 120px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                font-size: 12px;
                color: rgb(80, 100, 255);
                border: 2px solid rgb(100, 117, 252);
                border-radius: 5px;
            }
        }
    }


    // 用户协议样式
    .box-but {
        width: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15px auto;
        cursor: pointer;

        p {
            font-size: 13px;
            color: rgb(118, 118, 118);

            span {
                color: rgb(0, 0, 0);
            }
        }

    }


    // 确认按钮
    .el-button {
        background-color: rgb(81, 113, 255);
        width: 345px;
        height: 35px;
        line-height: 40px;
        font-size: 14px;
        margin: 0 auto;
        border: none;
    }

    ::v-deep .el-form-item__content {
        width: 260px;
        margin: 0px !important;

        // 正则提示的样式
        .el-form-item__error {
            width: 260px;
            left: unset;
        }
    }

    // 注册，找回
    .box-link {
        width: 345px;
        margin: 0 auto;
        text-align: center;

        .box-router-link {
            color: rgb(82, 82, 82);
            font-size: 14px;
        }
    }

}
</style>